<template>
	<view class="index">
		<view class="tabbar">
			<tab-bar :type="type"></tab-bar>
		</view>
		<view class="tab_nav">
			<nav-bar nav_btn="back" :background="isSky ? '#ffffff' : 'rgba(0,0,0,0)'" :title="title" :color="color" :auto_img="image" :type="Two"></nav-bar>
		</view>
		<view class="back">
			<image class="w100 h100" :src="storeInfo.bg" mode=""></image>
		</view>
		<view class="fenxiang_btn" @click="fenXiang">
			<image class="w100 h100" src="../../../static/store/goodsDetailes/fenx.png" mode=""></image>
		</view>
		<view class="content">
			<view class="swiper_box">
				<swiper class="swiper w100 h100" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
					<swiper-item v-for="(item, index) in storeInfo.banner" :key="index">
						<view class="swiper-item uni-bg-red">
							<image class="w100 h100" :src="item.img_src" mode=""></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="sj_js_box" @click="onDetail">
				<view class="sj_js_img">
					<image class="w100 h100" src="../static/sj_jieshao.png" mode=""></image>
				</view>
				<view class="con_box flex">
					<view class="con_img_box">
						<image class="w100 h100" :src="storeInfo.avatar_url" mode=""></image>
					</view>
					<view class="con_txt_box s30 family f500">
						{{ storeInfo.description }}
					</view>
				</view>
			</view>
			<view class="sj_xw_box" v-if="articleList.length != 0">
				<view class="flexjus">
					<view class="sj_js_img">
						<image class="w100 h100" src="../static/sj_xw.png" mode=""></image>
					</view>
					<view class="gengduo s24 family f500" @click="goNews">更多 ></view>
				</view>
				<view class="xw_con_box">
					<view
						class="flex"
						style="padding-bottom: 20upx; padding-top: 20upx; border-bottom: 2upx dashed #fff"
						v-for="(item, index) in articleList"
						:key="index"
						v-if="index < 2"
						@click="goNewList(item.id)"
					>
						<view>
							<view class="title_txt s28 family f500">
								{{ item.description }}
							</view>
							<view class="guankan_num family f500">{{ item.views }}人观看</view>
							<view class="img_name_box flex">
								<view class="image_box">
									<image class="w100 h100" :src="'https://sz.vvv5g.com/' + item.image" mode=""></image>
								</view>
								<view class="name_box s22 family f500">
									{{ title }}
								</view>
							</view>
						</view>
						<view class="right_image">
							<image class="w100 h100" :src="'https://sz.vvv5g.com/' + item.image" mode=""></image>
						</view>
					</view>
				</view>
			</view>
			<view class="sj_xw_box" v-if="list.length != 0">
				<view class="flexjus">
					<view class="sj_js_img">
						<image class="w100 h100" src="../static/hdms.png" mode=""></image>
					</view>
					<view class="gengduo s24 family f500" @click="goMiaosha">更多 ></view>
				</view>
				<view v-if="list.list.data.length != 0" class="hdms_box flex">
					<view class="ms_goods_box" v-for="(item, index) in list.list.data" :key="index" @click="goDetail(item.id)">
						<view class="ms_goods_img">
							<image class="w100 h100" :src="item.image_src" mode=""></image>
						</view>
						<view class="ms_goods_name s26 family f500">
							{{ item.title }}
						</view>
						<view class="money_cart_box flexjus">
							<view class="ms_goods_money s36 familytow fblod">￥{{ item.price }}</view>
							<!-- <view class="ms_goods_cart">
								<image class="w100 h100" src="../static/cart.png" mode=""></image>
							</view> -->
						</view>
					</view>
				</view>
			</view>
			<view class="sj_xw_box">
				<view class="flexjus">
					<view class="sj_js_img">
						<image class="w100 h100" src="../static/xpsj.png" mode=""></image>
					</view>
					<!-- <view class="gengduo s24 family f500">
						更多 >
					</view> -->
				</view>
				<view class="xpsj_box">
					<view class="goods_bottom flex" v-for="(item, index) in goodsList" :key="item.id">
						<view class="left_xp_box">
							<image class="w100 h100" :src="item.image_src" mode="aspectFill"></image>
						</view>
						<view class="right_xp_box">
							<view class="xp_goods_name s32 family f500">
								{{ item.title }}
							</view>
							<view class="xp_goods_yuanjia s24 f500 family">原价￥{{ item.price }}</view>
							<view class="xp_goods_money_box flexjus">
								<view class="xp_goods_money_txt s48 familytow fblod">
									<text class="s24 familytow fblod">￥</text>
									{{ item.price }}
								</view>
								<view class="xp_goods_btn s28 familytow fblod txtali" @click="goDetail(item.id)">去抢购</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<share-box ref="child" :bottom="bottom" :show="show" :type="typeShare"></share-box>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import shareBox from '@/components/share.vue';
import imgUrl from '../../../utils/request.js';
export default {
	components: {
		shareBox
	},
	computed: {
		// ...mapState()
	},
	data() {
		return {
			type: 'one',
			title: '',
			image: '../static/left_jian_back.png',
			color: 'black',
			indicatorDots: true,
			bottom: 'wedding',
			autoplay: true,
			interval: 2000,
			duration: 500,
			storeInfo: {},
			goodsList: [],
			typeShare: 3,
			show: false,
			id: null,
			Two: 'two',
			articleList: [],
			totalNum: '',
			page: 1,
			list: [],
			isSky: true
		};
	},
	onLoad() {
		this.title = this.$store.state.shop.shopname;
		this.getStoreData();
		this.getStoreGoods();
		this.getArticle();
		this.getList();
	},
	onPageScroll(e) {
		if (e.scrollTop > 0) {
			this.isSky = true;
			this.color = 'black';
			this.image = '../static/left_jian_back.png';
		} else {
			this.isSky = false;
			this.color = 'white';
			this.image = '../static/left_jian.png';
		}
	},
	onReachBottom() {
		if (this.page >= this.totalNum) {
			this.$wanlshop.msg('我是有底线的!');
		} else {
			this.page++;
			this.getStoreData();
		}
	},
	methods: {
		// 跳转商家介绍详情
		onDetail() {
			this.$store.commit('setStoreInfo', this.storeInfo);
			uni.navigateTo({
				url: '/pages/filePages/storePages/introduceDeatil'
			});
		},
		// 获取店铺新闻
		getArticle() {
			this.$request({
				url: 'article/getList',
				method: 'POST',
				data: {
					shop_id: this.$store.state.shop.id
				}
			}).then((res) => {
				this.articleList = res.data.data.data;
			});
		},
		// 跳转新闻详情页
		goNewList(id) {
			uni.navigateTo({
				url: '/pages/news/newsDetails?id=' + id
			});
		},
		// 获取店铺
		getStoreData() {
			this.$request({
				url: 'shop/getShopInfo',
				data: {
					id: this.$store.state.shop.id
				}
			}).then((res) => {
				if (res.statusCode == 200) {
					this.storeInfo = res.data.data;
				}
			});
		},
		// 获取普通店铺的商品列表
		getStoreGoods() {
			let that = this;
			that
				.$request({
					url: 'product/getNewGoodsList',
					method: 'POST',
					data: {
						shop_id: that.$store.state.shop.id,
						type: 'goods',
						page: that.page
					}
				})
				.then((res) => {
					that.totalNum = res.data.data.last_page;
					that.goodsList = that.page == 1 ? (res.data.data.data ? res.data.data.data : []) : that.goodsList.concat(res.data.data.data);
				});
		},
		// 获取秒杀列表
		getList() {
			this.$request({
				url: 'product/seckills',
				method: 'POST',
				data: {
					shop_id: this.$store.state.shop.id,
					limit: 3,
					starttime: -1
				}
			}).then((res) => {
				this.list = res.data.data;
			});
		},
		goMiaosha() {
			uni.navigateTo({
				url: '/pages/filePages/storePages/activity?type=1'
			});
		},
		// 调用子组件方法传递参数
		fenXiang() {
			this.$refs.child.xianshi(this.id);
		},
		// 跳转商品详情
		goDetail(id) {
			uni.navigateTo({
				url: '/pages/filePages/goodsDetail/goodsDetail?id=' + id + '&type=0'
			});
		},
		// 跳转新闻列表
		goNews() {
			uni.navigateTo({
				url: '/pages/news/newsList'
			});
		}
	}
};
</script>

<style scoped lang="scss">
.index {
	overflow: hidden;
	padding-bottom: 130upx;

	.tabbar {
		position: absolute;
	}

	.back {
		width: 750upx;
		height: 100%;
		position: fixed;
		top: 0;
		background-color: #ffffff;

		image {
			filter: blur(3px);
		}
	}

	.fenxiang_btn {
		width: 68upx;
		height: 68upx;
		position: absolute;
		top: 192upx;
		right: 62upx;
		z-index: 9;
	}

	.content {
		position: relative;

		.swiper_box {
			width: 686upx;
			height: 268upx;
			margin: 0 auto;

			.swiper-item {
				width: 686upx;
				height: 268upx;
				border-radius: 16upx;
				overflow: hidden;
			}
		}

		.sj_js_box {
			margin-top: 32upx;
			margin-left: 32upx;

			.sj_js_img {
				width: 136upx;
				height: 42upx;
			}

			.con_box {
				width: 622upx;
				height: 192upx;
				background-color: rgba($color: #ffffff, $alpha: 0.1);
				border-radius: 16upx;
				margin-top: 20upx;
				padding: 32upx 32upx 32upx 32upx;

				.con_img_box {
					width: 212upx;
					height: 200upx;
					border-radius: 16upx;
					overflow: hidden;
				}

				.con_txt_box {
					width: 400upx;
					height: 200upx;
					margin-left: 20upx;
					color: #ffffff;
					letter-spacing: 0;
					overflow: hidden;
					display: -webkit-box;
					text-overflow: ellipsis;
					-webkit-line-clamp: 5;
					-webkit-box-orient: vertical;
				}
			}
		}

		.sj_xw_box {
			margin-top: 32upx;
			margin-left: 32upx;
			padding-right: 32upx;

			.sj_js_img {
				width: 136upx;
				height: 42upx;
			}

			.gengduo {
				color: #ffffff;
				margin-top: 2upx;
			}

			.xw_con_box {
				width: 622upx;
				background: rgba(255, 255, 255, 0.09);
				border-radius: 16upx;
				border: 2upx solid rgba(255, 255, 255, 0.34);
				filter: blur(undefinedpx);
				margin: 20upx auto;
				padding: 32upx 32upx 0upx 32upx;
				overflow: hidden;

				.title_txt {
					width: 426upx;
					// height: 70upx;
					display: flex;
					flex: 1;
					letter-spacing: 0;
					overflow: hidden;
					display: -webkit-box;
					text-overflow: ellipsis;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					color: #ffffff;
				}

				.guankan_num {
					margin-top: 26upx;
					font-size: 18upx;
					color: rgba(255, 255, 255, 0.7);
				}

				.img_name_box {
					margin-top: 20upx;

					.image_box {
						width: 32upx;
						height: 32upx;
						border-radius: 50%;
						overflow: hidden;
					}

					.name_box {
						color: #ffffff;
						margin-left: 12upx;
					}
				}

				.right_image {
					width: 170upx;
					height: 170upx;
					border-radius: 8upx;
					overflow: hidden;
					margin-left: 42upx;
				}
			}

			.hdms_box {
				width: 622upx;
				height: 312upx;
				background: rgba(255, 255, 255, 0.09);
				border-radius: 16upx;
				border: 2upx solid rgba(255, 255, 255, 0.34);
				filter: blur(undefinedpx);
				margin: 20upx auto;
				padding: 32upx 32upx 0 32upx;

				.ms_goods_box {
					width: 194upx;
					margin-right: 18upx;

					.ms_goods_img {
						width: 194upx;
						height: 194upx;
						border-radius: 8upx;
						overflow: hidden;
					}

					.ms_goods_name {
						width: 178upx;
						height: 36upx;
						color: #ffffff;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						margin-top: 8upx;
					}

					.money_cart_box {
						margin-top: 8upx;

						.ms_goods_money {
							color: #ef3540;
						}

						.ms_goods_cart {
							width: 38upx;
							height: 38upx;
							margin-top: 6upx;
						}
					}
				}
			}

			.xpsj_box {
				width: 622upx;
				background: rgba(255, 255, 255, 0.11);
				border-radius: 16upx;
				border: 2upx solid rgba(255, 255, 255, 0.34);
				filter: blur(undefinedpx);
				margin: 20upx auto;
				padding: 32upx 32upx 32upx 32upx;

				.goods_bottom {
					padding-bottom: 30upx;
					border-bottom: 2upx solid rgba(244, 244, 244, 0.3);
					margin-bottom: 20upx;

					.left_xp_box {
						width: 170upx;
						height: 170upx;
						border-radius: 8upx;
						overflow: hidden;
					}

					.right_xp_box {
						margin-left: 20upx;

						.xp_goods_name {
							width: 414upx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							color: #ffffff;
						}

						.xp_goods_yuanjia {
							color: rgba(255, 255, 255, 0.7);
							margin-top: 8upx;
						}

						.xp_goods_money_box {
							margin-top: 26upx;

							.xp_goods_money_txt {
								color: #ef3540;
							}

							.xp_goods_btn {
								width: 152upx;
								height: 68upx;
								background: #ef3540;
								border-radius: 50upx;
								color: #ffffff;
								line-height: 68upx;
							}
						}
					}
				}
			}
		}
	}
}
</style>
